<template>
  <div class="my-header">
    <a-button type="primary" @click="toggleCollapsed">
      <component :is="$antIcons[icon]" />
    </a-button>
    <div class="button-groups">
      <component class="button-icon" :style="fontColor" :is="$antIcons[fullIcon]" @click="expandOrCompressScreen" />
      <component class="button-icon" :style="fontColor" :is="$antIcons['BellOutlined']" />
      <div class="user-box">
        <component style="font-size: 20px; margin-right: 16px;" :style="fontColor" :is="$antIcons['UserOutlined']" />
        <span :style="fontColor">admin</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { mapGetters, mapMutations } from 'vuex'
import { message } from 'ant-design-vue'
import { mutations } from '../../store/types'
import { defineComponent, ref } from 'vue'
import screenfull from 'screenfull'
export default defineComponent({
  setup () {
    const icon = ref<string>('MenuUnfoldOutlined')
    let fullIcon = ref<string>('ExpandOutlined') // CompressOutlined
    let full = ref<boolean>(false)
    const fontColor = { color: '#fff' }
    return { icon, fullIcon, full, fontColor }
  },
  computed: {
    ...mapGetters({
      collapsed: 'system/collapsed'
    })
  },
  methods: {
    ...mapMutations({
      setCollapsed: `system/${mutations.system.collapsed}`
    }),
    expandOrCompressScreen () {
      if (screenfull.isEnabled) {
        const elem = document.body
        if (elem) {
          this.full = !this.full
          this.$forceUpdate()
          if (this.full) {
            screenfull.request(elem)
            screenfull.on('error', () => message.error({content: '全屏失败，请刷新后再试'}))
          } else screenfull.exit()
          screenfull.on('change', () => {
            const isFullscreen = (screenfull as any).isFullscreen
            this.fullIcon = !this.full ? 'ExpandOutlined' : 'CompressOutlined'
            if (isFullscreen !== this.full) {
              this.full = isFullscreen
              this.$forceUpdate()
            }
          })
        } else message.error({content: '未获取到要全屏展示的内容'})
        } else message.error({content: '当前浏览器不支持全屏操作'})
    },
    toggleCollapsed () {
      this.setCollapsed(!this.collapsed)
    }
  }
})
</script>
<style lang="scss" scoped>
.my-header {
  background: #001529;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .button-groups {
    display: flex;
    flex-direction: row;
    align-items: center;
    .button-icon {
      cursor: pointer;
      font-size: 20px;
      margin-right: 24px;
    }
  }
}
</style>
